<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar
                title="类别列表"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div>
            <van-row>
                <van-col span="6">
                    <div id="leftNav">
                        <ul>
                            <li v-for="(item,index) in category" :key="index" @click="clickCategory(index,item.ID)" :class="{categoryActive:categoryIndex==index}">
                                {{item.MALL_CATEGORY_NAME}}
                            </li>
                        </ul>
                    </div>
                </van-col>
                <van-col span="18">
                    <div>
                        <van-tabs v-model="actives" color="#e5017d" swipeable @click="onClickCategorySub">
                            <van-tab v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">
                                
                            </van-tab>
                        </van-tabs>
                    </div>
                    <div id="list_div">
                        <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                            <van-list v-model="loading" :finished="finished" @load="onLoad">
                                <div class="list_item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsInfo(item.ID)">
                                    <div class="list_item_img">
                                        <img :src="item.IMAGE1" width="100%" :onerror="errorImg"/>
                                    </div>
                                    <div class="list_item_text">
                                        <div>{{item.NAME}}</div>
                                        <div class="">￥{{item.ORI_PRICE | moneyFilter}}</div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { money } from '@/filter/money.js'
import axios from 'axios'
import url from '@/serviceAPI.confing.js'
export default {
    data() {
        return {
            category:[],
            categoryIndex:0,
            actives:0,
            categorySub:[], //小类集合
            loading:false,//是否处于加载状态
            finished:false,//是否已经加载数据完毕
            isRefresh:false,//下拉刷新
            page:1,//页码
            goodsList:[],//获取的商品数据
            categorySubId:'',//商品子分类的ID
            errorImg:'this.src="'+require('@/components/img/errorimg.jpg') + '"'//失效图片
        }
    },
    created(){
        this.getCategory()
        
    },
    mounted(){
        let winHgight = document.documentElement.clientHeight
        document.getElementById('leftNav').style.height = winHgight-46 + "px"
        document.getElementById('list_div').style.height = winHgight-90 + "px"
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        getCategory(){
            axios({
                url:url.getCategoryList,
                method:'get'
            })
            .then(response=>{
                console.log(response)
                if(response.data.code==200 && response.data.message){
                    this.category = response.data.message
                    this.getCategorySubByCategoryId(this.category[0].ID)
                }else{
                    Toast('服务器错误，数据取得失败')
                }
            })
            .catch(error=>{
                console.log(error)
            })
        },
        //获取小类的数据
        getCategorySubByCategoryId(categoryId){
            axios({
                url:url.getCategorySubList,
                method:'post',
                data:{categoryId:categoryId}
            })
            .then(response=>{
                console.log(response)
                if(response.data.code==200 && response.data.message){
                    this.categorySub = response.data.message
                    this.actives = 0
                }else{
                    Toast('服务器错误，数据取得失败')
                }
            })
            .catch(error=>{
                console.log(error)
            })
        },
        //点击小类获取商品信息
        onClickCategorySub(index,title){
            this.categorySubId = this.categorySub[index].ID
            console.log(index,title,this.categorySubId)

            this.goodsList = []
            this.page = 1
            this.finished = false
            this.onLoad()
            this.loading=false;
        },
        //点击大类
        clickCategory(index,categoryId){
            this.categoryIndex = index
            this.getCategorySubByCategoryId(categoryId)

            this.categorySubId = ''
            this.goodsList = []
            this.page = 1
            this.finished = false
            this.loading=false;
            this.onLoad()
        },
        //上拉加载
        onLoad(){
            setTimeout(()=>{
                //如果有ID则使用，如果没有默认为第一个小类的ID
                this.categorySubId = this.categorySubId?this.categorySubId:this.categorySub[0].ID
                this.getGoodList()
            },500)
        },
        //下拉刷新
        onRefresh(){
            setTimeout(()=>{
                this.isRefresh = false
                this.finished = false
                this.goodsList=[]
                this.page = 1
                this.onLoad()
            },500)
        },
        //获取商品列表信息
        getGoodList(){
            console.log(this.categorySubId)
            axios({
                url:url.getGoodsListByCategorySubID,
                method:'post',
                data:{
                    page:this.page,
                    categorySubId:this.categorySubId,
                }
            })
            .then(response=>{
                // console.log(response)
                if(response.data.code==200 && response.data.message.length){
                    this.page++
                    this.goodsList=this.goodsList.concat(response.data.message)
                    console.log(this.goodsList)
                }else{
                    this.finished = true;
                }
                this.loading=false;
                console.log(this.loading,this.finished)
            })
            .catch(error=>{
                console.log(error)
            })
            
        },
        //跳转到详情
        goGoodsInfo(id){
            // console.log(id)
            this.$router.push({name:'Goods',params:{goodsId:id}})
        }
    },
    filters:{
        moneyFilter(value){
            return money(value)
        }
    }
}
</script>

<style scoped>
#leftNav{
    background: #f0f9ff;
}
#leftNav ul li{
    line-height:2rem;
    border-bottom:1px solid #E4E7ED;
    padding:3px;
    font-size:0.8rem;
    text-align: center;
}  
.categoryActive{
    background: #FFF;
}
#list_div{
    overflow: scroll;
}

.list_item{
    display:flex;
    flex: row;
    font-size:0.8rem;
    border-bottom:1px solid #F0F0F0;
    background-color:#FFF;
    padding:5px;
}
.list_item_img{
    flex:8;
}
.list_item_text{
    flex:16;
    margin-top:10px;
    margin-left:10px;
}
</style>